package com.example.composableexample.ui.home

import android.annotation.SuppressLint
import androidx.activity.compose.BackHandler
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.selection.toggleable
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Face
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material.icons.outlined.Email
import androidx.compose.material.icons.outlined.Settings
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.AssistChip
import androidx.compose.material3.Badge
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.BottomAppBarDefaults
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.Checkbox
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.DismissibleDrawerSheet
import androidx.compose.material3.DismissibleNavigationDrawer
import androidx.compose.material3.Divider
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.ProgressIndicatorDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.ScrollableTabRow
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TriStateCheckbox
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.stateDescription
import androidx.compose.ui.state.ToggleableState
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composableexample.ui.theme.ComposableExampleTheme
import kotlinx.coroutines.launch

/**
 * author: LiLiang
 * createTime: 2022/8/18-0:30
 * remark:
 **/

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun TabNavPreview() {

    ComposableExampleTheme {
       NavigationBarExample()
    }


}


@Composable
fun TriCheckboxExample() {
    Column {
        val (state, stateChange) = remember {
            mutableStateOf(true)
        }
        val (state1, stateChange1) = remember {
            mutableStateOf(true)
        }
        val parentState = remember(key1 = state, key2 = state1) {
            if (state && state1) ToggleableState.On
            else if (!state && !state1) ToggleableState.Off
            else ToggleableState.Indeterminate
        }
        val onParentClick = {
            val s = parentState != ToggleableState.On
            stateChange(s)
            stateChange1(s)
        }
        TriStateCheckbox(state = parentState, onClick = onParentClick)
//        Spacer(modifier = Modifier.size(25.dp))
        Column(modifier = Modifier.padding(10.dp, 0.dp, 0.dp, 0.dp)) {
            Checkbox(checked = state, onCheckedChange = stateChange)
//            Spacer(modifier = Modifier.size(25.dp))
            Checkbox(checked = state1, onCheckedChange = stateChange1)
        }
    }
}

@Composable
fun DropdownMenuExample() {
    var expanded by remember {
        mutableStateOf(false)
    }
    Box(
        modifier = Modifier
            .fillMaxSize()
            .wrapContentSize(Alignment.TopStart)
    ) {
        IconButton(onClick = { expanded = true }) {
            Icon(imageVector = Icons.Default.MoreVert, contentDescription = "")
        }
        DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
            DropdownMenuItem(
                text = {
                    Text(text = "编辑")
                },
                onClick = {},
                leadingIcon = {
                    Icon(imageVector = Icons.Outlined.Edit, contentDescription = "")
                }
            )
            DropdownMenuItem(
                text = {
                    Text(text = "设置")
                },
                onClick = {},
                leadingIcon = {
                    Icon(imageVector = Icons.Outlined.Settings, contentDescription = "")
                }
            )
            Divider()
            DropdownMenuItem(
                text = {
                    Text(text = "联系我们")
                },
                onClick = {},
                leadingIcon = {
                    Icon(imageVector = Icons.Outlined.Email, contentDescription = "")
                },
                trailingIcon = {
                    Text(text = "F11", textAlign = TextAlign.Center)
                }
            )
        }
    }
}


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DismissibleNavigationDrawerExample() {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    val items = listOf(Icons.Default.Favorite, Icons.Default.Face, Icons.Default.Email)
    val selectedItem = remember {
        mutableStateOf(items[0])
    }
    BackHandler(enabled = drawerState.isOpen) {
        scope.launch {
            drawerState.close()
        }
    }

    DismissibleNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            DismissibleDrawerSheet {
                Spacer(modifier = Modifier.height(12.dp))
                items.forEach { item ->
                    NavigationDrawerItem(
                        icon = { Icon(imageVector = item, contentDescription = "") },
                        label = { Text(text = item.name) },
                        selected = item == selectedItem.value,
                        onClick = {
                            scope.launch { drawerState.close() }
                            selectedItem.value = item
                        },
                        modifier = Modifier.padding(horizontal = 12.dp)
                    )
                }
            }
        },
        content = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = if (drawerState.isClosed) ">>>>>>>> Swipe <<<<<<<<" else "<<<<< Swipe >>>>>")
                Spacer(modifier = Modifier.height(20.dp))
                Button(onClick = { scope.launch { drawerState.open() } }) {
                    Text(text = "Click to open")
                }
            }
        }
    )
}


@Composable
fun CircularProgressIndicatorExample() {
    var progress by remember {
        mutableStateOf(0.1f)
    }
    val animatedProgress by animateFloatAsState(
        targetValue = progress,
        animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
    )
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        CircularProgressIndicator(progress = animatedProgress)
        Spacer(modifier = Modifier.requiredHeight(30.dp))
        OutlinedButton(
            onClick = { if (progress < 1f) progress += 0.1f },
            modifier = Modifier.semantics {
                val progressPercent = (progress * 100).toInt()
                stateDescription = "Progress $progressPercent%"
            }) {
            Text(text = "Increase")
        }
    }
}

@Composable
fun CheckBoxExample() {
    val (checkedState, onStateChange) = remember { mutableStateOf(true) }
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp)
            .toggleable(
                value = checkedState,
                onValueChange = { onStateChange(!checkedState) },
                role = Role.Checkbox
            )
            .padding(horizontal = 16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Checkbox(
            checked = checkedState,
            onCheckedChange = null
        )
        Text(
            text = "Option selection",
            style = MaterialTheme.typography.bodyLarge,
            modifier = Modifier.padding(start = 16.dp)
        )
    }
//    Checkbox(checked = checkedState, onCheckedChange = { checkedState = it })
}


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CenterAlignedTopAppBarExample() {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        text = "Centered TopAppBar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = "")
                    }
                },
                actions = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(imageVector = Icons.Filled.Favorite, contentDescription = "")
                    }
                }
            )
        },
        content = { innerPadding ->
            LazyColumn(
                contentPadding = innerPadding,
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                val list = (0..75).map { it.toString() }
                items(count = list.size) {
                    Text(
                        text = list[it],
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 16.dp)
                    )
                }
            }
        }
    )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CardExample() {
    Card(modifier = Modifier.size(width = 180.dp, height = 100.dp), onClick = {}) {
        Box(modifier = Modifier.fillMaxSize()) {
            Text(text = "点击", modifier = Modifier.align(Alignment.Center))
        }
    }
}

@Composable
fun ButtonExample() {
    Button(onClick = { /*TODO*/ }, contentPadding = ButtonDefaults.ButtonWithIconContentPadding) {
        Icon(
            imageVector = Icons.Filled.Favorite,
            contentDescription = "",
            modifier = Modifier.size(ButtonDefaults.IconSize)
        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
        Text(text = "按钮")
    }
}

@Composable
fun BottomAppBarExample() {
//    BottomAppBar {
//        IconButton(onClick = { /*TODO*/ }) {
//            Icon(imageVector = Icons.Filled.Menu, contentDescription = "")
//        }
//    }
    BottomAppBar(
        actions = {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(imageVector = Icons.Filled.Check, contentDescription = "")
            }
            IconButton(onClick = { /*TODO*/ }) {
                Icon(imageVector = Icons.Filled.Edit, contentDescription = "")
            }
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { /*TODO*/ },
                shape = CircleShape,
                elevation = FloatingActionButtonDefaults.elevation()
            ) {
                Icon(imageVector = Icons.Filled.Add, contentDescription = "")
            }
        }
    )
}


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun NavigationBarExample() {
    NavigationBar {
        NavigationBarItem(selected = true, onClick = { /*TODO*/ }, icon = {
            BadgedBox(
                badge = {
                    Badge {
                        val badgeNumber = "8"
                        Text(
                            text = badgeNumber,
                            modifier = Modifier.semantics {
                                contentDescription = "$badgeNumber new notifications"
                            }
                        )
                    }
                }
            ) {
                Icon(
                    imageVector = Icons.Filled.Star,
                    contentDescription = ""
                )
            }
        })
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BadgeExample() {
    Badge() {
        Text(text = "99+")
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { /*TODO*/ },
        label = { Text(text = "Assist") },
        leadingIcon = {
            Icon(imageVector = Icons.Filled.Settings, contentDescription = null)
        }
    )
}

@Composable
fun DialogExample() {

    var openDialog by remember {
        mutableStateOf(true)
    }
    if (openDialog) {
        AlertDialog(
            onDismissRequest = {
                openDialog = false
            },
            icon = {
                Icon(imageVector = Icons.Filled.Favorite, contentDescription = null)
            },
            title = {
                Text(text = "标题")
            },
            text = {
                Text(text = "弹窗内容")
            },
            confirmButton = {
                TextButton(onClick = { openDialog = false }) {
                    Text(text = "确定")
                }
            },
            dismissButton = {
                TextButton(onClick = { openDialog = false }) {
                    Text(text = "取消")
                }
            }
        )
    }
}

@Composable
fun TabNav() {
    var tabIndex by remember {
        mutableStateOf(0)
    }
//    val tabs = listOf("纯阳", "七秀", "万花", "天策", "少林","五毒", "唐门","丐帮")
    val tabs = listOf("纯阳", "七秀", "万花", "天策", "少林")

    TabRow(selectedTabIndex = tabIndex) {
        tabs.forEachIndexed { index, title ->
            Tab(
                selected = tabIndex == index,
                onClick = { tabIndex = index },
                text = { Text(text = title) })
        }
    }
}

@Composable
fun ScrollableTabNav() {
    var tabIndex by remember {
        mutableStateOf(0)
    }
    val tabs = listOf("纯阳", "七秀", "万花", "天策", "少林", "五毒", "唐门", "丐帮")
//    val tabs = listOf("纯阳", "七秀", "万花", "天策", "少林")
    Column {
        ScrollableTabRow(selectedTabIndex = tabIndex) {
            tabs.forEachIndexed { index, title ->
                Tab(
                    selected = tabIndex == index,
                    onClick = { tabIndex = index },
                    text = { Text(text = title) })
            }
        }
    }
}